 <template>
  <div>
      <div>
      <h3>班级课程分配操作</h3>
    </div>
    <div>
      <el-button type="primary" size="small">请选择关联班级：</el-button>
      <el-select
        v-model="classValue"
        filterable
        placeholder="请选择班级名称"
        size="small"
        clearable
        class="setSelection"
      >
        <el-option
          v-for="item in classNameData"
          :key="item.classId"
          :label="item.termName+'-'+item.className"
          :value="item.classId"
        ></el-option>
      </el-select>
       <el-button @click="goClassCourseHandle" icon="el-icon-document" type="primary" size="small">查看已分配信息</el-button>
    </div>
      <div style="text-align: center;margin-top:20px">
        <!-- <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p> -->
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="courseValue"
          filterable
          :titles="['课程列表', '分配列表']"
          :button-texts="['到左边', '到右边']"
          :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
          @change="handleChange"
          :data="data"
        >
          <span slot-scope="{ option }">{{ option.label }}</span>
          <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
          <el-button
            class="transfer-footer"
            slot="right-footer"
            size="small"
            @click="addClassAndCourseRelation"
          >确认分配</el-button>
        </el-transfer>
      </div>

  </div>
</template>
<style>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
</style>

<script>
export default {
  inject: ['reload'],
  data () {
    return {
      data: [],
      tableData: [], // 未分配角色的用户数据
      classNameData: [], // 所有角色名称数据
      classValue: '',
      courseValue: ''
    }
  },
  created () {
    this.initData()
    this.getAllClassName()
  },
  methods: {
    goClassCourseHandle () {
      // 班级课程已分配页面
      this.$router.replace('/classCourseAlreadyInfo')
    },
    handleChange (value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    },
    addClassAndCourseRelation () {
      // 确认关联用户与角色
      if (this.classValue === '') {
        this.$confirm('关联班级不能为空！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      }
      this.$axios
        .post('/classCourses', {
          classId: this.classValue,
          courseId: this.courseValue
        })
        .then(response => {
          if (response.data.code === 200) {
            setTimeout(() => {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.initData()
              this.classValue = ''
              this.courseValue = ''
              this.reload()
            }, 300)
          } else {
            this.$message({
              message: '添加失败',
              type: 'warning'
            })
          }
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    getAllClassName () {
      // 获取所有角色名称
      this.$axios
        .get('/classCourses/classNames')
        .then(response => {
          this.classNameData = response.data.data
          console.log(response.data.data)
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    initData () {
      // 初始化数据
      this.$axios
        .get('/courseTeachers/courseNames')
        .then(response => {
          this.tableData = response.data.data
          for (let i = 0; i <= this.tableData.length; i++) {
            this.data.push({
              key: this.tableData[i].courseId,
              label:
                this.tableData[i].typeName + '-' + this.tableData[i].courseName
            })
          }
          console.log(response.data.data)
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    }
  }
}
</script>
